

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset=gbk>
<title>椭圆曲线</title>
</head>
<style>
*{
margin:0px;padding:0px; 
}
.points{
width:1px;height:1px;border:0px solid rgb(204, 28, 28);
position:absolute;
line-height:1px;font-size:1px;
background:rgb(65, 171, 30);
/* animation: progress1 4s infinite; */
}
/* @-webkit-keyframes progress1 {
    0% {
        -webkit-transform: scalex(0);
        transform: scalex(0);
        opacity: 0.8;
    }
}
@keyframes progress1 {
    0% {
        -webkit-transform: scalex(0);
        transform: scalex(0);
        opacity: 0.5;
    }
} */
.go-oval{
width:10px;height:10px;border:0px solid #111;
position:absolute;
line-height:1px;font-size:1px;
background:#111;
border-radius:5px;
}
</style>
<body>
 <div style="position:absolute;left:800px;top:130px;height:500px;width:900px;">
  <div id="tuoyuan2" style="height:500px;width:500px;"></div>
  <div id="go-oval2" class="go-oval"></div>
 </div>
 
 
</body>
</html>
<script>
(function(){
 function $(idd){
  var obj = {};
  if( typeof( idd ) === 'string'){
   var idName = idd.substr(1, idd.length );
   //alert(idName)

   if( idd.substr(0,1) === '#' ){
    obj = document.getElementById(idName);
   }
   else if( idd.substr(0,1) === '.'){
    obj =  document.getElementsByName(idName);
    //obj = obj.length ? document.getElementsByClassName(idName) : null;
    //alert(obj.length);
    //alert( obj[0].className )
   }
   else if( idd == 'document' ){
    obj = document;
   }
   else {
    obj = document.getElementsByTagName(idd);
    //alert(idd)
   }
  }
  else {
   obj = idd;
  }

  return obj;
 }
 
 //alert(document.body.clientWidth  )
 
 //生成椭圆曲线的点（数组）
 function make_points(a, b, interval, addX, addY){
  var x,y;
  var xy = [],xy1 = [],xy2 = [];
  
  addX = addX ? addX : a;
  addY = addY ? addY : b;
  
  x = - Math.sqrt( (b*b)*a*a/(b*b) );
  
  for(var n = 0; 1; n ++){
   y = Math.sqrt( b*b - (b*b*x*x)/(a*a) );
   
   if( n == 0 ){
    y0 = y;
   }
   
   xy1[n] = [x + addX,y + addY];
   //n++;
   xy2[n] = [x + addX,-y + addY];
   x = x + interval;
   
   if( x > Math.sqrt( (b*b)*a*a/(b*b) ) ){
    break;
   }
  }
  
  //xy2倒序
  /*
  xy2 = xy2.sort(function(x,y){
    return x == y ? 0 : (x > y ? -1 : 1);
  });
  */
  for(var n = 0, n2 = len = xy2.length - 1 ; n <= len; n ++, n2--){
   xy[n] = xy2[n2];
  }
  
  xy = xy1.concat(xy);
  
  return xy;
 }
 
 //画椭圆曲线
 function draw_oval(points){
  var len = points.length;
  var divs = '';
  
  for(var n = 0; n < len; n ++){
   divs += '<div class="points" style="left:'+ points[n][0] +'px;top:'+ points[n][1] +'px;"></div>';
  }
  
  return divs;
 }
 
 //沿着曲线跑动
 function go_oval(idd,points, n, t, addX, addY){
  var len = points.length;
  n = n ? n : 0;
  t = t ? t : 10;
  addX = addX ? addX : 0;
  addY = addY ? addY : 0;
  
  var $obj = $(idd).style;
  $obj.left = points[n][0] + addX + 'px';
  $obj.top = points[n][1] + addY + 'px';
  
  n ++;
  
  n = n == len ? 0 : n;
  
  setTimeout(function(){
   go_oval(idd, points, n, t, addX, addY);
  },t);
  
  
 }
 
 window.onload = function(){
  var points2 = make_points(200,30,1);
  $('#tuoyuan2').innerHTML =  draw_oval( points2 );
  go_oval('#go-oval2',points2,0,10 ,-5,-5);
  
 };
 
})();

</script>